<template>
  <div class="inline-flex">
    <a-tree-select
      :multiple="multiple"
      class="w-[200px]"
      v-model="selectedKeys"
      :data="[...(themeCategoryList as any)]"
      :disabled="disabled"
      :field-names="{
        key: 'id',
        title: 'label'
      }"
      @change="onChange"
      allow-clear
    ></a-tree-select>
    <a-button @click="reload" :disabled="disabled">
      <icon-refresh />
    </a-button>
  </div>
</template>

<script setup lang="ts">
import { fetchThemeCategory, themeCategoryList } from "@/api/selector/selector";
import { ENUM_DATA_SCOPE } from "@/enum/system.enum";
import { Message } from "@arco-design/web-vue";
const props = defineProps<{
  scoped: ENUM_DATA_SCOPE;
  multiple?: boolean;
  disabled?: boolean;
}>();
const emit = defineEmits(["change"]);
const selectedKeys = defineModel<string | string[]>();
const onChange = () => {
  emit("change", selectedKeys.value);
};

const getData = async () => {
  if (themeCategoryList.value.length === 0) {
    await fetchThemeCategory(props.scoped);
  }
};
onMounted(async () => {
  getData();
});

const reload = () => {
  themeCategoryList.value = [];
  getData();
  Message.success("Success");
};
</script>

<style lang="scss" scoped></style>
